<template>
  <div id="role_edit" class="container">
    <div class="content">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="title" :to="{ path: toPath }">角色管理</el-breadcrumb-item>
        <el-breadcrumb-item class="title" :to="{ path: toPath }">角色项</el-breadcrumb-item>
        <el-breadcrumb-item class="title">{{titleName}}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="panel" style="padding:0rem;">
        <el-row :gutter="0">
          <el-col :span="3" class="el-col-nav">
            <div>
              <el-tree
                ref="tree"
                :expand-on-click-node="false"
                :data="roleCheckNavList"
                show-checkbox
                check-strictly
                node-key="menuId"
                @node-click="nodeClick"
                @check="checkBoxCheck"
                :props="defaultProps"
                @check-change="checkChange"
              ></el-tree>
            </div>
          </el-col>
          <el-col :span="21" class="role-item">
            <div class="role-info">
              角色项名称：{{roleInfo.roleName}}&nbsp;&nbsp;&nbsp;&nbsp;角色级别：{{roleInfo.roleModeName}}
              <div class="btn_div" v-if="isLook != 1">
                <div class="btn_cancel" @click="cancelRoleEdit()">取消</div>
                <div class="btn_sure" @click="saveRoleEdit()">保存</div>
              </div>
            </div>
            <ul id="accordion" class="accordion">
              <li v-for="item in roleCheckMenuList" :key="item.menuId">
                <div class="link">
                  <div class="link-info">
                    <div @click.stop>
                      <el-checkbox-group v-model="roleCheckList" @change="roleCheckChange(item)">
                        <el-checkbox :label="item.menuId" :disabled="isLook == 1">{{item.name}}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                    <!-- <div @click.stop>
                      <el-radio-group v-model="value">
                        <el-radio label="1">校区全部数据</el-radio>
                        <el-radio label="2">只看与自己关联的数据</el-radio>
                      </el-radio-group>
                    </div>-->
                  </div>
                  <i class="fa fa-chevron-down"></i>
                </div>
                <ul class="submenu">
                  <el-checkbox-group v-model="roleCheckList">
                    <el-checkbox
                      :disabled="isLook == 1"
                      v-for="interfaceItem in item.list"
                      :label="interfaceItem.menuId"
                      :key="interfaceItem.menuId"
                    >
                      <p @click.prevent="checkBoxChange(interfaceItem)">{{interfaceItem.name}}</p>
                    </el-checkbox>
                  </el-checkbox-group>
                </ul>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </div>
    <privilegeAdd ref="privilegeAdd" @callback="closeAdd"></privilegeAdd>
  </div>
</template>

<script>
let vm;
let user;
import privilegeAdd from "./privilege_add";
export default {
  components: {
    privilegeAdd
  },
  data() {
    return {
      value: "",
      roleCheckNavList: [],
      roleCheckMenuList: [],
      defaultProps: {
        children: "list",
        label: "name"
      },
      titleName:"",
      currentRoleType: "",
      defaultNavList: [],
      roleCheckList: [],
      roleInfo: {},
      toPath: "",
      isLook: ""
    };
  },
  methods: {
    campusChange: function(campusId) {
      this.$router.go(-1);
    },
    closeAdd() {},
    /**点击功能项回调 */
    checkBoxChange(item) {
      console.log(item);
      if (user.roleMode == 0) {
        vm.$refs.privilegeAdd.init(JSON.parse(JSON.stringify(item)));
      }
    },
    /**取消 */
    cancelRoleEdit() {
      this.$router.go(-1);
    },
    checkChange(data, isCheck, childrenCheck) {
      console.log(data,isCheck);
      if (vm.isHasChildren(data).length == 0) return;
      let currentChecedKeys = this.$refs.tree.getCheckedKeys();
      let childrenKeys = vm.isHasChildren(data);
      if (isCheck) {
        childrenKeys.forEach(item => {
          currentChecedKeys.push(item);
        });
      } else {
        console.log(currentChecedKeys);
        for (let y = 0; y < childrenKeys.length; y++) {
          for (let i = 0; i < currentChecedKeys.length; i++) {
            if (childrenKeys[y] == currentChecedKeys[i]) {
              currentChecedKeys.splice(i, 1);
              break;
            }
          }
        }
      }
      console.log(currentChecedKeys);
      this.$refs.tree.setCheckedKeys(currentChecedKeys);
    },
    isHasChildren(data) {
      let menuIds = [];
      if (data.list != null && data.list.length > 0) {
        for (let a = 0; a < data.list.length; a++) {
          menuIds.push(data.list[a].menuId);
        }
      }
       console.log(menuIds);
      return menuIds;
    },
    /**点击权限菜单 */
    roleCheckChange(item) {
      let index = vm.roleCheckList.indexOf(item.menuId);
      if (vm.currentRoleType == 1) {
        let checkNavList = [];
        checkNavList = vm.$refs.tree.getCheckedKeys();
        if (index != -1) {
          checkNavList.push(item.menuId);
        } else {
          checkNavList.splice(checkNavList.indexOf(item.menuId), 1);
        }
        //当导航栏为页面菜单时  刷新tree
        vm.$refs.tree.setCheckedKeys(checkNavList);
      }

      if (index != -1) {
        item.list.forEach(item => {
          vm.roleCheckList.push(item.menuId);
        });
      } else {
        item.list.forEach(item => {
          vm.deleteCheckItem(item.menuId);
        });
      }
    },
    /**删除已选择数组中的数据 */
    deleteCheckItem(deleteCheckItem) {
      for (let i = 0; i < vm.roleCheckList.length; i++) {
        if (deleteCheckItem == vm.roleCheckList[i]) {
          console.log(deleteCheckItem);
          vm.roleCheckList.splice(i, 1);
        }
      }
    },
    /**保存编辑 */
    saveRoleEdit() {
      let differList = [];
      let navCheckRoleList = this.$refs.tree.getCheckedKeys();
      vm.defaultNavList.forEach(item => {
        if (navCheckRoleList.indexOf(item) == -1) {
          differList.push(item);
        }
      });
      differList.forEach(item => {
        let index = vm.roleCheckList.indexOf(item);
        if (index != -1) {
          vm.roleCheckList.splice(index, 1);
        }
      });
      navCheckRoleList.forEach(item => {
        vm.roleCheckList.push(item);
      });
      vm.roleInfo.menuIdList = [];
      vm.roleInfo.menuIdList = Array.from(new Set(vm.roleCheckList));
      api.roleUpdate(vm.roleInfo).then(function(data) {
        if (data.resultCode == 2000) {
          vm.$message({
            message: "编辑成功",
            type: "success"
          });
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    checkBoxCheck(item, node) {
      console.log(item, node);
      let index = node.checkedKeys.indexOf(item.menuId);
      let paras = {
        roleMode: vm.roleInfo.roleMode,
        parentId: item.menuId
      };
      vm.getRoleMenuList(item.menuId, item.type);
      api.getNotNavSubMenuIds(paras).then(function(data) {
        if (data.resultCode == 2000) {
          if (index != -1) {
            // 并集 数组去重
            let RemoveSame = [...new Set([...data.list, ...vm.roleCheckList])];
            vm.roleCheckList = RemoveSame;
          } else {
            //数组交集
            vm.roleCheckList = vm.roleCheckList.filter(item => {
              return data.list.indexOf(item) < 0;
            });
          }
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    /**点击导航列表 */
    nodeClick(item, node, check) {
      vm.getRoleMenuList(item.menuId, item.type);
    },
    /**获取页面/功能项权限 */
    getRoleMenuList(parentId, type) {
      vm.currentRoleType = type;
      let paras = {
        parentId: parentId,
        roleMode: vm.roleInfo.roleMode,
        type: type
      };
      vm.roleCheckMenuList = [];
      api.getSubMenusOnLevel(paras).then(function(data) {
        if (data.resultCode == 2000) {
          vm.roleCheckMenuList = data.list;
          vm.$nextTick(function() {
            vm.initAccordion();
          });
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    /**初始化折叠组件 */
    initAccordion() {
      var Accordion = function(el, multiple) {
        this.el = el || {};
        this.multiple = multiple || false;

        // Variables privadas
        var links = this.el.find(".link");
        // Evento
        links.on(
          "click",
          { el: this.el, multiple: this.multiple },
          this.dropdown
        );
      };

      Accordion.prototype.dropdown = function(e) {
        var $el = e.data.el,
          $this = $(this),
          $next = $this.next();
        if ($this.parent().attr("class") == "open") {
          $this.css("border-bottom-right-radius", "0.1rem");
          $this.css("border-bottom-left-radius", "0.1rem");
        } else {
          $this.css("border-bottom-right-radius", "0rem");
          $this.css("border-bottom-left-radius", "0rem");
        }

        $next.slideToggle();
        $this.parent().toggleClass("open");

        // if (!e.data.multiple) {
        //   $el
        //     .find(".submenu")
        //     .not($next)
        //     .slideUp()
        //     .parent()
        //     .removeClass("open");
        // }
      };

      var accordion = new Accordion($("#accordion"), false);
      console.log(accordion);
      accordion.el
        .find(".link")
        .eq(0)
        .click();
    },
    initData() {
      let roleId = this.$route.query.roleId;
      vm.isLook = this.$route.query.isLook;
      vm.titleName = vm.isLook == 1?"角色查看":"角色编辑";
      console.log(vm.isLook);
      api
        .roleInfo({ roleId: roleId }) //获取角色信息
        .then(function(data) {
          if (data.resultCode == 2000) {
            delete data.role.campusId; //true
            vm.roleInfo = data.role;
            vm.roleCheckList = [];
            vm.roleCheckList = vm.roleInfo.menuIdList;
            vm.roleInfo.roleModeName = "";
            return api.listRoleMode();
          } else {
            vm.$message.error(data.message);
          }
        })
        .then(function(datas) {
          //获取角色层级
          if (datas.resultCode == 2000) {
            if (vm.roleInfo.childRoleMode == null) {
              datas.list.forEach(item => {
                if (
                  item.value == vm.roleInfo.roleMode &&
                  item.parentValue == null
                ) {
                  vm.roleInfo.roleModeName = item.label;
                  vm.$forceUpdate();
                }
              });
            } else {
              datas.list.forEach(item => {
                if (
                  item.value == vm.roleInfo.childRoleMode  &&
                  item.parentValue == vm.roleInfo.roleMode
                ) {
                  vm.roleInfo.roleModeName = item.label;
                  vm.$forceUpdate();
                }
              });
            }
          } else {
            vm.$message.error(data.message);
          }
          return api.getNavMenusOnLevel({
            roleMode: vm.roleInfo.roleMode
          });
        })
        .then(function(data_item) {
          //获取导航列表
          console.log(data_item);
          if (data_item.resultCode == 2000) {
            let navList = data_item.list;
            for (let i = 0; i < navList.length; i++) {
              if (vm.isLook == 1) {
                navList[i].disabled = true;
              } else {
                if (navList[i].type == 1) {
                  navList[i].disabled = true;
                }
              }
              if (navList[i].list && navList[i].list.length > 0) {
                let navChildList = navList[i].list;
                for (let n = 0; n < navChildList.length; n++) {
                  if (vm.isLook == 1) {
                    navChildList[n].disabled = true;
                  } else {
                  }
                }
              }
            }
            vm.roleCheckNavList = navList;
            vm.$refs.tree.setCurrentKey(navList[0].menuId); //设置导航第一个高亮
            vm.$refs.tree.setCheckedKeys(vm.roleCheckList);
            vm.$nextTick(function() {
              //页面刷新回调
              console.log(vm.$refs.tree.getCheckedKeys());
              vm.defaultNavList = vm.$refs.tree.getCheckedKeys();
              // checkNavList.forEach(item => {
              //   vm.roleCheckList.splice(vm.roleCheckList.indexOf(item), 1);
              // });
              vm.getRoleMenuList(navList[0].menuId, navList[0].type); //显示导航第一个权限列表
            });
          } else {
            vm.$message.error(data_item.message);
          }
        });
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    if (user.roleMode == 0) {
      vm.toPath = "/role_management";
    } else if (user.roleMode == 1) {
      vm.toPath = "/organization/role_management";
    } else {
      vm.toPath = "/user_role_setting/role_management";
    }
    vm.roleCheckNavList = [];
    vm.initData(); //初始化数据
  },
  computed: {}
};
</script>

<style lang="scss">
#role_edit {
  .el-breadcrumb__separator {
    color: #999999;
  }
  .el-breadcrumb__inner.is-link {
    font-weight: 400;
    color: #444444;
  }
  .el-breadcrumb__inner.is-link:hover {
    color: #3885f8;
  }
  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #3885f8;
  }
  .el-checkbox__inner::after {
    width: 0.04rem;
  }
  .el-checkbox__inner {
    width: 0.16rem;
    height: 0.16rem;
  }

  .el-checkbox__label {
    font-size: 0.16rem;
  }

  .el-tree-node__content:hover {
    background-color: #ffffff;
  }
  .link {
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #215998;
    }
  }
  .submenu {
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #33383c;
    }
  }
  .el-tree {
    padding: 0.2rem 0.1rem;
    position: relative;
    cursor: default;
    background-color: #f7f9fc;
    color: #33383c;
  }
  .el-tree-node__content {
    height: 0.34rem;
  }
  .el-tree .is-current > .el-tree-node__content {
    color: #3885f8;
  }
  .el-tree-node__children .is-current .el-tree-node__content {
    color: #3885f8;
  }
  // .el-tree-node__children .is-current .is-checked .el-tree-node__content {
  //   color: #3885f8;
  // }
  .el-tree-node:focus > .el-tree-node__content {
    background-color: #ffffff;
  }

  .el-tree .is-current .is-checked > .el-tree-node__content {
    background-color: #ffffff;
  }
}
</style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>

<style scoped>
/*底部按钮*/
.title {
  font-size: 0.18rem;
  color: #141414;
  text-shadow: 0.01rem 0 0 currentcolor;
  line-height: 0.5rem;
  padding-top: 0.1rem;
}
.btn_div {
  float: right;
  margin: 0 auto;
  padding: 0.08rem 0;
  overflow: hidden;
  text-align: center;
  font-size: 0;
}
.btn_div > div {
  width: 1.2rem;
  height: 0.38rem;
  line-height: 0.38rem;
  margin-right: 0.1rem;
  display: inline-block;
  font-size: 0.16rem;
  text-align: center;
  border-radius: 0.06rem;
  cursor: pointer;
  user-select: none;
}
.btn_div > div:last-child {
  margin-right: 0 !important;
}

.btn_disable {
  color: #666666;
  border: solid 1px #dcdfe6;
  cursor: not-allowed !important;
}
.btn_sure {
  color: white;
  background-color: #3885f8;
}
.btn_sure:hover {
  background-color: rgba(56, 133, 248, 0.8);
}
.btn_cancel {
  color: #666666;
  border: 0.01rem solid #c0c4cc;
  line-height: 0.38rem !important;
}
.btn_cancel:hover {
  background-color: rgba(56, 133, 248, 0.1);
}
ul {
  list-style-type: none;
}
.el-col-nav {
  height: 7.83rem;
  font-size: 0.16rem;
  background-color: #f7f9fc;
  box-shadow: 0px 1px 38px 0px rgba(56, 133, 248, 0.08);
  border-radius: 10px 0px 0px 10px;
  border: solid 1px #edf2f9;
}
.role-info {
  line-height: 0.68rem;
  height: 0.68rem;
  font-size: 0.16rem;
  color: #666666;
  padding: 0 0.2rem;
  border-bottom: 1px solid #edf2f9;
}
.accordion {
  width: 100%;
  background: #fff;
  margin: 0;
  padding: 0 0.2rem;
}
.accordion .link {
  margin-top: 0.15rem;
  cursor: pointer;
  display: block;
  border-radius: 0.1rem;
  height: 0.58rem;
  color: #215998;
  font-size: 0.16rem;
  background-color: #f7f9fc;
  border: 1px solid #edf2f9;
  position: relative;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion .link .el-checkbox {
  color: #215998;
  font-weight: 600;
}
.link-info {
  display: flex;
  width: 96%;
  height: 0.56rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.1rem 0.2rem;
  border-right: 1px solid #edf2f9;
}

/* .accordion li:last-child .link {
  border-bottom: 0;
} */

.accordion li i {
  position: absolute;
  top: 0.25rem;
  right: 0.2rem;
  font-size: 18px;
  color: #595959;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion li i.fa {
  width: 0.1rem;
  height: 0.06rem;
  background-image: url(../../../assets/img/system_set/icon_down.png);
}
.accordion li i.fa-chevron-down {
  font-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: block;
}

/* .accordion li.open .link {
  color: #b63b4d;
} */

/* .accordion li.open i {
  color: #b63b4d;
} */
.accordion li.open i.fa-chevron-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/**
 * Submenu
 -----------------------------*/
.submenu {
  display: none;
  background: #ffffff;
  font-size: 14px;
  border-bottom-right-radius: 0.1rem;
  border-bottom-left-radius: 0.1rem;
  border-right: 1px solid #3885f8;
  border-left: 1px solid #3885f8;
  border-bottom: 1px solid #3885f8;
  padding: 0.2rem;
}

.submenu p {
  color: #33383c;
  font-size: 0.15rem;
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

/* .submenu li {
  border-bottom: 1px solid #4b4a5e;
} */

/* .submenu a {
  display: block;
  text-decoration: none;
  color: #d9d9d9;
  padding: 12px;
  padding-left: 42px;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
} */

/* .submenu a:hover {
  background: #b63b4d;
  color: #fff;
} */

.accordion li.open .link {
  color: #215998;
  border: solid 1px #3885f8;
}

.accordion li.open i.fa-chevron-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
</style>
